<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" /> 
  <meta name="Keywords" content="" /> 
  <meta name="description" content="" /> 
  <meta name="viewport" content="width=device-width,initial-scale=1.0" /> 
  <meta content="width=640,target-densitydpi=device-dpi,user-scalable=no" name="viewport" /> 
  <title>神探闯关</title> 
  <link type="text/css" rel="stylesheet" href="css/style.css" /> 
  <script type="text/javascript" src="js/jquery-1.11.2.js"></script> 
 </head>
 <body> 
  <div class="warp"> 
   <div class="start_logo"> 
    <img src="images/start_logo.png" /> 
   </div> 
   <div class="center start_1"> 
    <img src="images/start_03.png" /> 
   </div> 
   <p class="center start_1_p start_3_p">成功发现本尼藏身之处<br/>
但怎么没见到他的踪影？<br/>
考验你眼力的时刻到了！<br/>
成功<span>匹配</span>本尼和管家所有的<span>表情</span>，即可闯关！</p> 
    <div class="start_3">
        <div class="box start_3_1" title="点击翻面">
            <img src="images/bg1.jpg" alt="纸牌正面" class="list flip" />
            <img src="images/1.jpg" alt="纸牌背面" class="list flip out" />
        </div>
        <div class="box start_3_2" title="点击翻面">
            <img src="images/bg1.jpg" alt="纸牌正面" class="list flip"/>
            <img src="images/1.jpg" alt="纸牌背面" class="list flip out"/>
        </div>
    </div>
   <div class="start_btn start3_btn"> 
    <a href="#"><img src="images/start_btn1.jpg" /></a> 
    <a href="#"><img src="images/start_btn2.jpg" /></a> 
   </div> 
   <p class="start_rule center"><a href="#">游戏规则</a></p> 
  </div> 
     <script type="text/javascript">
        $(window).load(function(){
            $("<link>").attr({ rel: "stylesheet", type: "text/css",href: "css/myanimate.css" }).appendTo("head");  
        });
     </script>
<!--
<script type="text/javascript">
        // 在前面显示的元素，隐藏在后面的元素
var eleBack = null, eleFront = null,
    // 纸牌元素们 
    eleList = $(".box img");

// 确定前面与后面元素
var funBackOrFront = function() {
    eleList.each(function() {
        if ($(this).hasClass("out")) {
            eleBack = $(this);
        } else {
            eleFront = $(this);
        }
    });
};
funBackOrFront();


$(".start_3_2").bind("click", function() {
    // 切换的顺序如下
    // 1. 当前在前显示的元素翻转90度隐藏, 动画时间225毫秒
    // 2. 结束后，之前显示在后面的元素逆向90度翻转显示在前
    // 3. 完成翻面效果
    eleFront.addClass("out").removeClass("in");
    setTimeout(function() {
        eleBack.addClass("in").removeClass("out");
        // 重新确定正反元素
        funBackOrFront();
    }, 225);
    return false;
});
    $(".start_3_1").bind("click", function() {
    // 切换的顺序如下
    // 1. 当前在前显示的元素翻转90度隐藏, 动画时间225毫秒
    // 2. 结束后，之前显示在后面的元素逆向90度翻转显示在前
    // 3. 完成翻面效果
    eleFront.addClass("out").removeClass("in");
    setTimeout(function() {
        eleBack.addClass("in").removeClass("out");
        // 重新确定正反元素
        funBackOrFront();
    }, 225);
    return false;
});
     </script>
-->
     <script type="text/javascript">
        setInterval(function(){
            $(".box img").eq(0).removeClass("in").addClass("out");
            $(".box img").eq(1).removeClass("out").addClass("in");
            setTimeout(function(){
                $(".box img").eq(0).removeClass("out").addClass("in");
                $(".box img").eq(1).removeClass("in").addClass("out");                
            },2500);
        },4000);
         setTimeout(function(){
             setInterval(function(){
                $(".start_3_2 img").eq(0).removeClass("in").addClass("out");
                $(".start_3_2 img").eq(1).removeClass("out").addClass("in");
                setTimeout(function(){
                    $(".start_3_2 img").eq(0).removeClass("out").addClass("in");
                    $(".start_3_2 img").eq(1).removeClass("in").addClass("out");                
                },1500);
            },4000);
            
         },1000);
         
     </script>
 </body>
</html>